import React from "react";
import { connect } from "dva";
import { Button, Form, Tabs, message, Modal } from "antd";
import Video from "./Video";
import VideoMon from "./VideoMon";
import Footer from "./Footer";
import Header from "./Header";
import Article from "./Article";
import ArticleMon from "./ArticleMon";
import Images from "./Images";
import ImagesMon from "./ImagesMon";
import RightTwo from "./RightTwo";
import { localUrl } from "../../utils/index";
import "./index.less";

const TabPane = Tabs.TabPane;
const { confirm } = Modal;

@connect(({ add }) => ({ add: add }))
@Form.create()
class AddVideo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      manuscript: "zh",     // 发布稿件文字类型 （中文 、 蒙文）
      mchType: "add",   // 当前稿件状态 （添加 、 编辑）
      articleShow: true,
      imgShow: false,
      bannerShow: false,
      activeKey: "1"
    };
    this.getRightValue = this.getRightValue.bind(this);
    this.getLeftValue = this.getLeftValue.bind(this);
    this.resetFields = this.resetFields.bind(this);
    window.PubSub.subscribe("editor", this.setEditor);
    window.PubSub.subscribe("editor", this.initUpload); //解决mch加载之后，上传组件会报错
    this.Footer = React.createRef();
  }

  componentDidMount() {
    let sc = document.createElement("script");
    sc.src = `${localUrl}/web/fsupload/upload.js`;
    document.querySelector("body").appendChild(sc);
    let token = localStorage.getItem("token");
    let site_id = localStorage.getItem("site_id");
    // 获取权限信息
    this.props.dispatch({
      type: "add/getQuanxian",
      payload: {
        data: {
          token: token ? token : "0655FAF517844EC1C99AAF9FB488A8DF",
          site_id: site_id ? site_id : "00000000000000000000000000000000"
        }
      }
    });
    // //保存url参数
    // this.props.dispatch({
    //   type: "theme/setParams",
    //   data: this.props.match.params
    // });
    //获取详情数据
    // if (this.props.match.params.video_id) {

    let mchType = sessionStorage.getItem("mchType");
    let articleType = sessionStorage.getItem("articleType");

    if (mchType === "editor") {
      let contentId = JSON.parse(sessionStorage.getItem("editorRow")).content_id;
      let contentType = JSON.parse(sessionStorage.getItem("editorRow")).content_type;

      // 判断显示 中文 或 蒙文 界面
      this.setState({
        manuscript: articleType,
        mchType: mchType
      });

      if (contentType === 1 || contentType === 2) {
        this.props.dispatch({
          type: "add/editinfo",
          data: { content_type: contentType, content_id: contentId },
          callback: data => {
            let id = data.type;
            this.setState({
              activeKey: String(id)
            });
            this.props.dispatch({
              type: "add/setActiveKey",
              data: String(id)
            });
            this.setFields(data);
          }
        });
      } else {
        let contentId = JSON.parse(sessionStorage.getItem("editorRow")).content_id;
        let contentType = JSON.parse(sessionStorage.getItem("editorRow")).content_type;
        this.props.dispatch({
          type: "add/editvideo",
          data: { content_type: contentType, content_id: contentId },
          callback: data => {
            let id = data.type;
            this.setState({
              activeKey: String(id)
            });
            this.props.dispatch({
              type: "add/setActiveKey",
              data: String(id)
            });
            this.setFields(data);
          }
        });
      }
    }
  }

  //获取表单值
  onRef = ref => {
    this.child = ref;
  };

  onFooterRef = ref => {
    this.Footer = ref;
  };

  //获取表单值
  onRef2 = ref => {
    this.child2 = ref;
  };

  // 添加 中文 稿件
  addForZh = () => {
    this.setState({
      manuscript: "zh"
    });
  };

  // 添加 蒙文 稿件
  addForMon = () => {
    this.setState({
      manuscript: "mon"
    });
  };

  //右边form
  getRightValue = () => {
    let rightData = this.child.getFieldsValue();
    if (rightData) {
      return rightData;
    }
  };
  //左边form
  getLeftValue = () => {
    let leftData = this.child2.getFieldsValue();
    // console.log(leftData)
    if (leftData) {
      return leftData;
    }
  };
  //获取所有值
  getFileds = () => {
    let left = this.child2.getFieldsValueTab();
    let right = this.child.getFieldsValueTab();
    let allForm = {};
    Object.assign(allForm, left, right);
    return allForm;
  };
  //订阅
  setEditor = data => {
    this.child2.setEditor(data);
    this.child.setEditor(data);
  };
  //重置
  resetFields = () => {
    this.child.resetFields();
    this.child2.resetFields();
  };
  //设置值
  setFields = data => {
    switch (data.content_type) {
      case 1:
        this.setState({
          activeKey: "1"
        });
        break;
      case 2:
        this.setState({
          activeKey: "2"
        });
        break;
      case 3:
        this.setState({
          activeKey: "4"
        });
        break;
      case 4:
        this.setState({
          activeKey: "10"
        });
        break;
      default:
        break;
    }
    setTimeout(() => {
      if (this.child.setFields) {
        this.child.setFields(data);
      }
      if (this.child2.setFields) {
        this.child2.setFields(data);
      }
    }, 0);
  };

  /**
   * 确认框
   */
  showConfirm = (callback = () => {}) => {
    confirm({
      title: "新建时，如果切换稿件类型数据会自动保存，确定要切换吗?",
      onOk: () => {
        this.Footer.submitForm(res => {
          if (res) {
            callback();
          } else {
            message.error("数据不合法");
          }
        });
      },
      onCancel: () => {
        // console.log('Cancel');
      }
    });
  };

  /**
   * 切换tab栏
   */
  changePane = activeKey => {
    if (this.props.add.mchType === "editor" && (this.props.add.informationInfo.type || this.props.add.videoInfo.type)) {
      if (this.props.add.informationInfo.type) {
        let id = this.props.add.informationInfo.type;
        this.setState({
          activeKey: String(id)
        });
        this.props.dispatch({ type: "add/setActiveKey", data: String(id) });
      } else {
        let id = this.props.add.videoInfo.type;
        this.setState({
          activeKey: String(id)
        });
        this.props.dispatch({ type: "add/setActiveKey", data: String(id) });
      }
      message.warning("编辑不可修改数据类型");
    } else {
      this.setState({
        activeKey: activeKey
      });
      this.props.dispatch({ type: "add/setActiveKey", data: activeKey });
    }
  };
  
  render() {
    let size = "small";
    const { informationInfo, videoInfo } = this.props.add;

    return (
      <div className="AddVideo">
        {(informationInfo && informationInfo.type) || (videoInfo && videoInfo.type) ? "" : <Header reset={this.resetFields} setFields={this.setFields} getFileds={this.getFileds} />}
        
        <div className="content">
          <div className="c-mid">
            {/* 切换 中文 、蒙文 稿件发布页面 */}
            {/* {this.mchType === "editor" ? 
              null 
            :
              <div>
                {this.manuscript === "zh" ?
                  (<Button 
                    size={size} 
                    type="primary"
                    onClick={this.addForZh}
                  > 
                    中文稿件 
                  </Button>)
                :  
                  (<Button 
                    size={size} 
                    onClick={this.addForZh}
                  > 
                    中文稿件 
                  </Button>)
                }
                
                {this.manuscript === "mon" ?
                  (<Button 
                    size={size}
                    type="primary"
                    style={{marginLeft: "10px"}}
                    onClick={this.addForMon}
                  >
                    蒙文稿件 
                  </Button>)
                :
                  (<Button 
                    size={size}
                    style={{marginLeft: "10px"}}
                    onClick={this.addForMon}
                  >
                    蒙文稿件 
                  </Button>)
                }
              </div>
            } */}

            <Tabs className="c-mid-tab" activeKey={this.state.activeKey} onChange={this.changePane}>
              <TabPane tab="文章" key="1">
                {/* {this.state.manuscript === "zh" ?
                  <Article className={this.state.activeKey === "1" ? "display" : ""} onRef={this.onRef2} match={this.props.match} />
                :
                  <ArticleMon className={this.state.activeKey === "1" ? "display" : ""} onRef={this.onRef2} match={this.props.match} />
                } */}

                <ArticleMon className={this.state.activeKey === "1" ? "display" : ""} onRef={this.onRef2} match={this.props.match} /> 
              </TabPane>

              {/* 中文、蒙文 图集组件 */}
              {/* {this.state.manuscript === "zh" ?
                <TabPane tab="图集" key="2">
                  {this.state.activeKey === "2" ? <Images className={this.state.activeKey === "2" ? "display" : ""} onRef={this.onRef2} /> : null}
                </TabPane>
              :
                <TabPane tab="图集" key="2">
                  {this.state.activeKey === "2" ? <ImagesMon className={this.state.activeKey === "2" ? "display" : ""} onRef={this.onRef2} /> : null}
                </TabPane>
              } */}

              <TabPane tab="图集" key="2">
                {this.state.activeKey === "2" ? <ImagesMon className={this.state.activeKey === "2" ? "display" : ""} onRef={this.onRef2} /> : null}
              </TabPane>

              {/* 中文、蒙文 视频组件 */}
              {/* {this.state.manuscript === "zh" ?
                <TabPane tab="视频" key="4">
                  {this.state.activeKey === "4" ? <Video className={this.state.activeKey === "4" ? "display" : ""} onRef={this.onRef2} /> : null}
                </TabPane>
              :
                <TabPane tab="视频" key="4">
                  {this.state.activeKey === "4" ? <VideoMon className={this.state.activeKey === "4" ? "display" : ""} onRef={this.onRef2} /> : null}
                </TabPane>
              } */}
              
              <TabPane tab="视频" key="4">
                {this.state.activeKey === "4" ? <VideoMon className={this.state.activeKey === "4" ? "display" : ""} onRef={this.onRef2} /> : null}
              </TabPane>
            </Tabs>
          </div>
          <div className="c-right">
            <Tabs className="c-mid-tab">
              <TabPane tab="基本信息" key="1">
                <RightTwo type={this.props.match.params.type} onRef={this.onRef} />
              </TabPane>
            </Tabs>
          </div>
        </div>
        <div className="footer">
          <Footer getLeft={this.getLeftValue} getRight={this.getRightValue} reset={this.resetFields} type={this.state.activeKey} onRef={this.onFooterRef} />
        </div>
        <div id="fcUpload"></div>
        <div id="fcUploadvideo"></div>
        <div id="fcUploadaudio"></div>
        <div id="fcUploadimg"></div>
      </div>
    );
  }
}
export default AddVideo;
